<template>
	<div class="blankWrap">
        <blankChildren @addCount="addCountMet"></blankChildren>
		{{ state.name }}
        {{ num }}
        {{ array[0] }}
	</div>
</template>
<script setup>
import { ref,reactive,onMounted, watch } from 'vue'
import blankChildren from './blankChildren.vue'
/* —— data ———————————————————— */
let state = reactive({
    name:"vue3-ts"
})
let num = ref('123')
let array = reactive([1,2,3])

/* —— watch ——————————————————— */
watch(num, (newVal, oldVal) => {
    console.log(newVal, oldVal);
})

function addCountMet(index){
    console.log(index);
}

/* —— 生命周期 —————————————————— */
console.log('created');
onMounted(() => {
    console.log('onMounted');
    num.value++
    state.name = 'vue3-ts-onMounted'
})
</script>
<style type="text/css" lang="less" scoped>
	
</style>